<template>
  <div className="container">
    <div className="left">
      <svg
        t="1664705031702"
        class="icon1"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="19699"
        width="30"
        height="30"
      >
        <path
          d="M640.8 316.5c-0.9 1.2-0.9 3.1 0 4.2l90 123c0.9 1.2 0.4 2-1.1 1.8L578.2 429c-1.4-0.2-3.1 0.8-3.7 2.1L513 570.6c-0.6 1.3-1.5 1.3-2.1 0l-61.5-139.5c-0.6-1.3-2.2-2.3-3.7-2.1l-151.5 16.5c-1.4 0.2-1.9-0.7-1.1-1.8l90-123c0.9-1.2 0.9-3.1 0-4.2l-90-123c-0.9-1.2-0.4-2 1.1-1.8l151.5 16.5c1.4 0.2 3.1-0.8 3.7-2.1l61.5-139.5c0.6-1.3 1.5-1.3 2.1 0l61.5 139.5c0.6 1.3 2.2 2.3 3.7 2.1l151.5-16.5c1.4-0.2 1.9 0.7 1.1 1.8l-90 123z"
          fill="#58D598"
          p-id="19700"
        ></path>
        <path
          d="M512 585m-374.8 0a374.8 374.8 0 1 0 749.6 0 374.8 374.8 0 1 0-749.6 0Z"
          fill="#FF5C7A"
          p-id="19701"
        ></path>
        <path
          d="M659.2 505.9h-87.8l8.5-19.8c17-36.8 16.6-67.7 2.8-90.6-14.7-24.5-41.4-28.3-55.7-27.4-5.5 0.3-10.4 3.5-13.1 8.3L438 506.1h-69.8c-11.1 0-20 9-20 20v214.7c0 11.1 9 20 20 20h74.9v-0.4c0.3 0 0.6 0.2 0.9 0.2h189.7c28.3 0 53.8-19.8 56.6-48.1l28.3-150c0-31.1-25.5-56.6-59.4-56.6z"
          fill="#FDDE80"
          p-id="19702"
        ></path>
        <path
          d="M401.4 726.3c-11.7 0-21.4-9.6-21.4-21.4V562.1c0-11.7 9.6-21.4 21.4-21.4 11.7 0 21.4 9.6 21.4 21.4V705c-0.1 11.7-9.7 21.3-21.4 21.3z"
          fill="#FCC038"
          p-id="19703"
        ></path>
      </svg>
      <div className="rec">{{ "推荐商品" }}</div>
    </div>
    <div className="right">
      <div className="checkAll">
        {{ "查看全部" }}
      </div>
      <svg
        t="1664705318396"
        class="icon2"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="25853"
        width="20"
        height="20"
      >
        <path
          d="M213.333333 128l130.432-128L853.333333 512 343.765333 1024 213.333333 896l384-384z"
          p-id="25854"
        ></path>
      </svg>
    </div>
  </div>
</template>
<script setup>

</script>
<style scoped lang="scss">
.container {
  width: 1000px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  // top: 646px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 900;
  border-bottom: 1px dashed #eee;
  .left {
    display: flex;
    position: absolute;
    top: 50%;

    transform: translateY(-50%);
    width: 200px;
    height: 100%;
    &:hover {
        cursor: pointer;
    }
    .icon1 {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .rec {
      position: absolute;
      left: 30px;
      top: 54%;
      transform: translateY(-50%);
    }
  }
  .right {
    display: flex;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 200px;
    height: 100%;
    &:hover {
        cursor: pointer;
        color: #ff5000;
    }
    .icon2 {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    .checkAll {
      position: absolute;
      right: 25px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
